<template>
	<div class="echarts-box" style="width: 100%; height: 100%">
		<Echart :options="options" id="radar1Chart"></Echart>
	</div>
</template>

<script>
import { graphic } from "echarts";

const animationDuration = 2000;
export default {
	data() {
		return {
			options: {},
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init(newData) {
			this.options = {
				tooltip: {
					trigger: "axis",
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
					},
				},
				radar: {
					radius: "66%",
					center: ["50%", "42%"],
					splitNumber: 8,
					indicator: [
						{ name: "Sales", min: 0, max: 20000 },
						{ name: "Administration", min: 0, max: 20000 },
						{ name: "Information Techology", min: 0, max: 20000 },
						{ name: "Customer Support", min: 0, max: 20000 },
						{ name: "Development", min: 0, max: 20000 },
						{ name: "Marketing", min: 0, max: 20000 },
					],
					splitArea: {
						show: false,
					},
				},
				legend: {
					left: "center",
					bottom: "10",
					textStyle: {
						fontSize: 12,
						color: "#6A93B9",
						// rich 自定义富文本样式
						rich: {
							a: {
								verticalAlign: "bottom",
							},
						},
					},
					data: ["Allocated Budget", "Expected Spending", "Actual Spending"],
				},
				series: [
					{
						type: "radar",
						symbolSize: 0,
						areaStyle: {
							shadowBlur: 13,
							shadowColor: "rgba(0,0,0,.2)",
							shadowOffsetX: 0,
							shadowOffsetY: 10,
							opacity: 1,
						},
						data: [
							{
								value: [5000, 7000, 12000, 11000, 15000, 14000],
								name: "Allocated Budget",
							},
							{
								value: [4000, 9000, 15000, 15000, 13000, 11000],
								name: "Expected Spending",
							},
							{
								value: [5500, 11000, 12000, 15000, 12000, 12000],
								name: "Actual Spending",
							},
						],
						animationDuration,
					},
				],
			};
		},
	},
};
</script>

<style lang="scss" scoped></style>
